<template>
	<view class="user-in-login">
		<!-- 上方文字 -->
		<view class="">
			<view class="login-text-one">找回密码</view>
			<view class="login-text-two">Find password</view>
		</view>
		<!-- 登录输入信息 -->
		<view class="in-msg">
			<!-- <u-field v-model="mobile" label="手机号" :clearable="true" placeholder="手机号" placeholder-style="color: #9d9e9e"></u-field>
			<u-field v-model="pass" label="密码" :right-icon="eyes" @right-icon-click="eyeControl" :clearable="false" placeholder="密码必须以字母开头" placeholder-style="color: #9d9e9e" :password="!showPass"></u-field> -->
			<u-form :model="form" ref="uForm">
				<u-form-item label="手机号" prop="mobile"label-width="200rpx">
					<u-input v-model="form.mobile" placeholder="手机号"/>
				</u-form-item>
				<u-form-item label="密码" prop="pass" label-width="200rpx">
					<u-input v-model="form.pass" type="password" placeholder="密码必须以字母开头"/>
				</u-form-item>
			</u-form>
		</view>
		<!-- 忘记密码 -->
		<view class="lost-pass" @click="login">已有账号，立即登录</view>
		<!-- 登录注册 -->
		<view class="login-register">
			<u-button shape="circle" class="login" hover-class="none" @click="submit">提交</u-button>
			<u-button shape="circle" class="register" hover-class="none" @click="backLast">返回</u-button>
		</view>	
	</view>
</template>

<script>
	import {postNewPass} from "../../../network/login.js"
	
	export default{
		updated() {
				this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
					form:{
							mobile:"",
							pass:"",
						},
					rules: {
						mobile: [
							{ 
								required: true, 
								message: '请输入正确手机号', 
								pattern: /^1[3-9]\d{9}$/,
							}
						],
						pass: [
							{
								required: true, 
								pattern:/^[A-Za-z]\w{5,15}$/,
								message: '请输入正确密码', 
							}
						]
					}
			}
		},
		methods:{
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						postNewPass(this.form).then(res=>{
							if(res.data.code == "L001"){
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								});
								setTimeout(res=>{
									uni.switchTab({
										url:"../home/Home",
									})
								},2000)
							}
						})						
					}
				});
			},
			login(){
				uni.navigateTo({
					url:"Login"
				})
			},
			backLast(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		
	}
</script>

<style scoped>
	.user-in-login{
		margin: 200rpx 20rpx 0rpx 20rpx;
	}
	.login-text-one{
		font-size: 60rpx;
		font-weight: bold;
		color: #626566;
	}
	.login-text-two{
		font-size: 30rpx;
		margin-top: 60rpx;
		color: #9d9e9e;
	}
	.in-msg{
		margin-top: 60rpx;
	}
	.lost-pass{
		float: right;
		margin-top: 30rpx;
	}
	.login-register{
		width: 100%;
		margin-top: 120rpx;
	}
	.login{
		width: 100%;
		color: #FFFFFF;
		font-size: 30rpx;
		background-color: #0C34BA;
	}
	.register{
		margin-top: 120rpx;
	}
</style>
